<template>
    <div>
        <Card :dis-hover="false" :bordered="false" shadow>
            <template slot="title">
                <Input v-model="params.name" placeholder="按字段名称模糊查询" style="width: 220px;margin-right: 10px" :maxlength="10" show-word-limit />
                <Input v-model="params.code" placeholder="按字段代码等值查询" style="width: 220px;margin-right: 10px" :maxlength="10" show-word-limit />
                <Select v-model="params.status" clearable placeholder="按启禁状态查询"  style="width: 220px;margin-right: 10px">
                    <Option value="1" label="启用中"></Option>
                    <Option value="2" label="已禁用"></Option>
                </Select>
                <Button type="primary" icon="ios-add" @click="handleWindow(null)">新增字典</Button>
            </template>

            <el-table :data="list" stripe size="mini" :height="600" v-loading="loading" element-loading-text="玩命加载中...请稍后...." element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 1)" :header-cell-style="{fontSize:'12px'}">
                <el-table-column type="index" align="center" width="80px" label="序号"></el-table-column>
                <el-table-column prop="name" label="字段名称" align="center" sortable></el-table-column>
                <el-table-column prop="code" label="字段代码" align="center" sortable></el-table-column>
                <el-table-column prop="status" label="启禁状态" align="center" sortable>
                    <template slot-scope="scope">
                        <el-switch @click.native="switchChange(scope.row)"
                                v-model="scope.row.status"
                                active-color="#13ce66"
                                inactive-color="#ff4949"
                                active-value="1"
                                inactive-value="2">
                        </el-switch>
                    </template>
                </el-table-column>
                <el-table-column prop="description" label="字段描述" align="center" sortable></el-table-column>
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <Button type="primary" ghost icon="md-create" @click="handleWindow(scope.row)">修改</Button>
                    </template>
                </el-table-column>
            </el-table>

            <el-pagination
                    layout="total,prev,pager,next"
                    :total="params.total"
                    :page-size="params.size"
                    :current-page="params.page"
                    :hide-on-single-page="false"
                    @size-change="handleSizeChange"
                    @current-change="handlePageChange"
            ></el-pagination>
        </Card>


        <Modal v-model="value" :closable="false">
            <template slot="header" >编辑字典信息</template>
            <Form ref="form" :model="dictionary" :label-width="80" label-position="right">
                <FormItem prop="name" label="字段名称" :rules="[{required:true,message:'必填',trigger:'blur'},{min:2,max:15,message:'2~15个字符',trigger:'blur'}]">
                    <Input placeholder="请输入字段名称" prefix="ios-document-outline" v-model="dictionary.name" :maxlength="15" show-word-limit />
                </FormItem>
                <FormItem prop="code" label="字段代码" :rules="[{required:true,message:'必填',trigger:'blur'},{min:2,max:15,message:'2~15个字符',trigger:'blur'}]">
                    <Input placeholder="请输入字段代码" prefix="logo-euro" v-model="dictionary.code" :maxlength="15" show-word-limit />
                </FormItem>
                <FormItem prop="description" label="字段描述" :rules="[{required:true,message:'必填',trigger:'blur'},{min:2,max:15,message:'2~15个字符',trigger:'blur'}]">
                    <Input placeholder="请输入字段描述" prefix="ios-film-outline" v-model="dictionary.description" :maxlength="15" show-word-limit />
                </FormItem>
            </Form>

            <template slot="footer">
                <Button type="primary" icon="ios-add" v-loading.fullscreen.lock="fullscreenLoading" @click="handleSubmit">提交</Button>
            </template>

        </Modal>

    </div>
</template>

<script>

    import { getList ,saveOrUpdate } from '@/api/system/dictionary/index'

    export default {
        name: "system-dictionary-index",
        data(){
            return {
                params:{page:1,size:10,total:0},
                list:[],
                loading:true,
                value:false,
                dictionary:{},
                fullscreenLoading:false
            }
        },
        methods:{
            handlePageChange(page){
                this.params.page = page;
                this.getList(this.params);
            },
            handleSizeChange(size){
                this.params.size = size;
                this.getList(this.params);
            },
            getList(data){
                getList(data).then(res=>{
                    this.list = res.data.data.rows;
                    this.params.total = res.data.data.total;
                    this.loading = false;
                })
            },
            handleWindow(data){
                this.$refs['form'].resetFields();
                if(!data){
                   this.dictionary = {};
                   this.dictionary.status = "1";
                    this.value = true;
                }else{
                    if(data.status === '2'){
                        this.$message.error({message:'禁用数据无法操作',center:true});
                        return false;
                    }else{
                        this.dictionary = data;
                        this.value = true;
                    }
                }
            },
            handleSubmit(){
                this.$refs['form'].validate(valid=>{
                    if(valid){
                        this.fullscreenLoading = true;
                        saveOrUpdate(this.dictionary).then(res=>{
                            this.getList(this.params);
                            this.value = false;
                            this.fullscreenLoading = false;
                        })
                    }else{
                        return false;
                    }
                });
            },
            switchChange(row){
                this.$confirm("确定要操作吗？","友情提示",{type:'warning'}).then(()=>{
                    this.fullscreenLoading = true;
                    saveOrUpdate(row).then(res=>{
                        this.fullscreenLoading = false;
                        this.getList(this.params);
                    })
                })
            }
        },
        created(){
            this.getList(this.params);
        }
    }
</script>

<style>
    .ivu-modal-header {
        border-bottom: 1px solid #e8eaec;
        padding: 14px 16px;
        line-height: 1;
        background-color: #409EFF;
        text-align: center;
        color: #F7F7F7;
    }

    .ivu-modal-footer {
        border-top: 0px solid #e8eaec;
        padding: 12px 18px 12px 18px;
        text-align: center;
    }
</style>